
// 生成3D城市
function City3D(base) {
    this.base = base; // 横向基数等于纵向基数  正方形
    this.max = 50;
}

// 创建地皮且添加到父级容器
City3D.prototype.buildArea = function (parent) {
    this.city = document.createElement("div");
    var b = this.base * this.max + "px";
    this.city.style.height = this.city.style.width = b;
    this.city.id = "City3D";

    parent.appendChild(this.city);
}

// 随机楼的高度
City3D.prototype.genHeight = function(){
    return (Math.random()*1000<<2)%130+20;
}

// 随机楼的宽度
City3D.prototype.genWidth = function(){
    return (Math.random()*1000<<2)%20+20;
}


City3D.prototype.buildEstate = function(top,left){
    var estate = document.createElement("div");
    var width = this.genWidth();
    estate.className = "a";
    estate.style.height = this.genHeight()+"px";
    estate.style.width = width +"px";
    estate.style.left = left+"px";
    estate.style.top = top+"px";
    this.city.appendChild(estate);
    // 构建墙
    var b1 = document.createElement("b");
    b1.style.width = width+"px";
    estate.appendChild(b1);

    var b2 = document.createElement("b");
    b2.style.width = width+"px";
    b1.appendChild(b2);

    var b3 = document.createElement("b");
    b3.style.width = width+"px";
    b2.appendChild(b3);

    var b4 = document.createElement("b");
    b4.style.width = width+"px";
    b3.appendChild(b4);

    var i = document.createElement("i");
    i.style.width = width+"px";
    b4.appendChild(i);
}

City3D.prototype.build = function (parent) {
    // 创建地皮
    this.buildArea(parent);
    //创建楼房
    for(var i = 0; i < this.base;i++){
        for(var j = 0;j<this.base;j++){
            this.buildEstate(i*this.max,j*this.max);

        }
    }
}

new City3D(8).build(document.body);

